<template>
    <el-table ref="singleTableRef" :data="tableData" highlight-current-row style="width: 100%"
        @current-change="handleCurrentChange">
        <el-table-column type="index" width="50" />
        <el-table-column property="deptno" label="Deptno" width="120" />
        <el-table-column property="dname" label="Dname" width="120" />
        <el-table-column property="loc" label="Loc" />
    </el-table>
    <div style="margin-top: 20px">
        <el-button @click="setCurrent(tableData[1])">Select second row</el-button>
        <el-button @click="setCurrent()">Clear selection</el-button>
        <el-button @click="search" type="primary">查询</el-button>
    </div>
    <el-button text @click="dialogVisible = true">
    打开对话框
  </el-button>
  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="30.9%"
    :before-close="handleClose"
  >
    <!-- <span>添加一条数据</span><br/>
    姓名<input v-model="dept.name_in" type="text"/><br/>
    位置<input v-model="dept.loc" type="text"/> -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
        <el-button @click="add">提交</el-button>
      </span>
    </template>
    <el-form :model="form">
      <el-form-item label="部门名称" :label-width="formLabelWidth">
        <el-input v-model="form.dname" autocomplete="off" />
      </el-form-item>
      <el-form-item label="部门地址" :label-width="formLabelWidth">
        <el-select v-model="form.loc" placeholder="Please select a zone">
          <el-option label="Zone No.1" value="shanghai" />
          <el-option label="Zone No.2" value="beijing" />
        </el-select>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
  
<script setup>

import { ref,reactive } from 'vue'
import { ElTable } from 'element-plus'
import axios from "axios"
const formLabelWidth="70px"
const form = reactive({
  dname: '赵子鉴部门',
    loc:'信息馆',
})


const currentRow = ref()
const singleTableRef = ref(null)
const dialogVisible=ref(false)
//声明一个响应式变量
const tableData = ref([])
const setCurrent = (row) => {
    singleTableRef.value?.setCurrentRow(row)
}

const handleCurrentChange = (val) => {
    currentRow.value = val
}
const search=()=>{
    axios.get("http://localhost:8080/dept/q/all").then( (res) => {
        console.log(res.data.result);
        tableData.value=res.data.result;
    })
}
const add=()=>{
    axios.put("http://localhost:8080/dept/add",form, {
  headers: {
    'Content-Type': 'application/json'
  }
}).then(response=>{
        console.log("PUT 请求成功",response.data);
    })
}


</script>
  